<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>成员列表</title>
     <style>
       body {
      text-align: center;
      background-color: aqua;
      background-image: url("https://img1.baidu.com/it/u=883830356,1709277576&fm=253&fmt=auto&app=138&f=JPEG?w=1080&h=408");
    background-size: cover;
    }
    
    table {
      margin: 0 auto;
      border-collapse: collapse;
      width: 80%;
      border: 2px solid #3399ff;
    }

    th,
    td {
      border: 1px solid #3399ff;
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #007acc;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #e6f2ff;
    }

    tr:hover {
      background-color: #b3d9ff;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #007bff;
      padding: 10px;
      border: 1px solid #007bff;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap; /* 防止内容过长时换行 */
    }

    a:hover {
      background-color: #007bff;
      color: white;
    }
    .del{
     display: inline-block;
      text-decoration: none;
      color: #FF4500;
      padding: 10px;
      border: 1px solid #FF4500;
      border-radius: 5px;
      transition: all 0.3s ease;
      white-space: nowrap; /* 防止内容过长时换行 */
    }
    .del:hover{
     background-color: #FF4500;
      color: white;
    }
    .search-container {
            text-align: center;
            margin-top: 20px;
        }

       .search-input {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
     </style>
     <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
  
     <% include ../header.ejs %>
     <h1 style="text-align: center">成员列表</h1>
     <!-- <a href="/">首页</a> -->
     <a href="/akbingo/insert">添加数据</a>
     <div class="search-container">
          <input class="search-input" type="text" placeholder="输入关键词搜索">
          <button onclick="searchAkbingos()">搜索</button>
      </div>
     <br/>
     <table width="100%">
          <thead>
               <tr>
                    <th>ID</th>
                    <th>成员姓名</th>
                    <th>年龄</th>
                    <th>C位歌曲</th>
                    <th>别称</th>
                    <th>删除</th>
                    <th>编辑</th>
               </tr>
          </thead>
         
         
          <tbody>
               <%data.forEach(function (item, index) { %>
               <tr>
                    <td><%= item.id %></td>
                    <td><%= item.name %></td>
                    <td><%= item.age  %></td>
                    <td><%= item.C %></td>
                    <td><%= item.waihao %></td>
                    <td><a class='del' href="/akbingo/delete/<%= item.id %>">删除</a></td>
                    <td><a href="/akbingo/edit/<%= item.id %>">编辑</a></td>
               </tr>
               <% }); %>
          </tbody>
     </table>

</body>
<script>
     function searchAkbingos() {
          const keyword = document.querySelector('.search-input').value;
     if (keyword) {
       $.ajax({
         url: `/akbingo/search/${keyword}`,
         type: 'GET',
         success: function (akbingos) {
           // 将查询结果赋值给 data
           data = akbingos;
           // 更新页面上的表格或其他展示区域
           updateTable(data);
         },
         error: function (error) {
           // 显示错误消息
           $('table').html('<tr><td colspan="6">加载成员列表失败，请稍后重试。</td></tr>');
           console.error(error);
         }
       });
     } else {
       window.location.href = `/akbingo`;
     }
     }

     function updateTable(data) {
     // 清空现有表格内容
     $('table tbody').empty();
           // 如果数据为空，显示提示信息
    if (data.length === 0) {
        $('table tbody').append('<tr><td colspan="6">未找到此成员。</td></tr>');
        return;
    }
  // 遍历数据并构建表格行
  $.each(data, function(index, item) {
    var row = "<tr>" +
              "<td>" + item.id + "</td>" +
              "<td>" + item.name + "</td>" +
              "<td>" + item.age + "</td>" +
              "<td>" + item.C + "</td>" +
              "<td>" + item.waihao + "</td>" +
              "<td><a class='del' href='/akbingo/delete/" + item.id + "'>删除</a></td>" +
              "<td><a href='/akbingo/edit/" + item.id + "'>编辑</a></td>" +
              "</tr>";
    $('table tbody').append(row);
  });
}
 </script>

</html>